<template>
  <div class="top-header">
    <div class="drop" title="退出系统" @click="loginOut">
      <img src="~@/assets/images/iconAll/drop.png" alt="" />
    </div>
    <div class="pro">
      <el-dropdown>
        <img src="~@/assets/images/iconAll/caidan.png" alt="" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><span title="查看产品信息" @click="productInfo"
              >产品信息</span
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              href="/static/doc/xmcu管理系统前后端交互api接口.docx"
              title="下载用户手册"
              >用户手册</a
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="title">
      <img src="~@/assets/images/iconAll/logoBoy.png" alt="" />
      <i :title="getUser.nickname || ''" v-if="getUser && getUser.nickname">{{
        getUser.nickname
      }}</i>
    </div>
    <!-- 产品信息 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="484px"
      center
      custom-class="proInfo"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="../../assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="info-box">
        <div><span>产品名称：</span> {{ productName }}</div>
        <div><span>产品型号：</span> {{ productType }}</div>
        <div><span>软件版本：</span> {{ versions }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookie from "js-cookie";
// import { mapState } from "vuex";
import { loginApi } from "@/api/index";
export default {
  name: "Header",
  data() {
    return {
      // titleName: "",
      title: "提示",
      isShow: false,
      productName: "会议对接服务系统", //产品名称
      productType: "VS-0XMC02-00000M", //产品型号
      versions: "V1.0", //版本号
    };
  },
  methods: {
    //  async
    async loginOut() {
      // let res = await loginApi.logout({ account: this.getUser.nickname });
      let res = await loginApi.logout({ account: "admin" });
      if (res.success === true) {
        Cookie.remove("userInfo");
        sessionStorage.removeItem("info");
        this.$router.push("/login");
      }
    },
    // 查看产品信息
    productInfo() {
      this.isShow = true;
    },
  },
  computed: {
    // ...mapState(["userMsg"]),
    getUser() {
      if (this.$store.state.userMsg && this.$store.state.userMsg.nickname) {
        return this.$store.state.userMsg;
      } else {
        return JSON.parse(sessionStorage.getItem("info"));
      }
    },
  },
};
</script>
<style lang="less">
.el-dropdown-menu {
  top: 35px !important;
  color: #4c5967;
  padding: 0;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #4c5967;
  background-color: #faf4ff;
}
.top-header {
  .proInfo {
    .el-dialog__header {
      padding: 10px 0 0 0;
      line-height: 40px;
      img {
        width: 23px;
        height: 23px;
        vertical-align: revert;
        margin-right: 5px;
      }
      span {
        font-size: 16px;
        color: #4c5967;
        vertical-align: super;
      }
    }
    .info-box {
      width: 250px;
      margin: 0 auto;
      div {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 25px;
        color: #333;
        span {
          font-weight: 600;
          color: #4c5967;
        }
      }
    }
  }
}
</style>
<style lang='less' scoped>
.top-header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-right: 30px;
  background-color: #fff;
  // display: flex;
  .title {
    width: 120px;
    height: 27px;
    line-height: 27px;
    margin-top: 18px;
    text-align: center;
    float: right;
    img {
      width: 27px;
      height: 27px;
      vertical-align: top;
    }
    i {
      margin-left: 5px;
      font-size: 16px;
      color: #4c5967;
      border-right: 1px solid #bfc0c2;
      padding: 0 10px 0 5px;
    }
  }
  .pro {
    width: 21px;
    height: 17px;
    margin: 3px 15px 0 2px;
    float: right;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .drop {
    width: 20px;
    height: 20px;
    margin-top: 5px;
    margin-right: 25px;
    float: right;
    cursor: pointer;

    img {
      width: 19px;
      height: 17px;
    }
  }
}
</style>
